<template>
  <div>
    <el-card class="header-top" :body-style="{ padding: '3px' }">
      <el-button type="primary" size="medium" class="header-left"
        >系统首页<i class="el-icon-close el-icon--right"></i
      ></el-button>

      <el-button type="primary" size="medium" class="header-right"
        >标签选项<i class="el-icon-arrow-down el-icon--right"></i
      ></el-button>
    </el-card>
    <div class="box">
      <div class="box-zuo">
        <el-card class="box-top">
          <div class="box-top-top">
            <div class="box-top-img">
              <img src="../assets/777.jpg" alt="" />
            </div>
            <div class="box-top-right">
              <p class="iid">敏哥520</p>
              <p class="user">普通用户</p>
            </div>
          </div>
          <div class="box-top-button">
            <p>上次登陆时间： {{ time }}</p>
            <p class="button-button">
              上次登陆地点： {{ province }}-{{ city }}
            </p>
          </div>
        </el-card>
        <el-card class="box-bottom">
          <div class="bottom-top">语言详情</div>
          <div class="one">
            <div>Vue</div>
            <div>
              <el-progress :percentage="57.2"></el-progress>
            </div>
            <div>JavaScript</div>
            <div>
              <el-progress :percentage="29.8" color="#f0e05a"></el-progress>
            </div>
            <div>CSS</div>
            <div>
              <el-progress :percentage="13.8" color="#409dff"></el-progress>
            </div>
            <div>HTML</div>
            <div>
              <el-progress :percentage="9.8" color="#f46a6b"></el-progress>
            </div>
          </div>
        </el-card>
      </div>
      <div class="box-you">
        <div class="box-you-top">
          <el-card class="box-top-right1">
            <div class="right1-a" style="background-color: #2d8bf0">
              <i class="el-icon-view"></i>
            </div>
            <div class="right1-b">
              <p style="color: #2d8bf0">12345</p>
              <p style="margin-top: 5px">用户访问量</p>
            </div>
          </el-card>
          <el-card class="box-top-right1">
            <div class="right1-a" style="background-color: #64d471">
              <i class="el-icon-chat-dot-square"></i>
            </div>
            <div class="right1-b">
              <div style="color: #64d471">345</div>
              <div style="margin-top: 5px">系统消息</div>
            </div>
          </el-card>
          <el-card class="box-top-right1">
            <div class="right1-a" style="background-color: #f15e43">
              <i class="el-icon-shopping-bag-1"></i>
            </div>
            <div class="right1-b">
              <div style="color: #f15e43">30000</div>
              <div style="margin-top: 5px">数量</div>
            </div>
          </el-card>
        </div>
        <el-card class="box-table">
          <div class="table-top">
            <span>待办事项</span>
            <a href="#" @click="add">添加</a>
          </div>
          <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column prop="address" width="620"> </el-table-column>
            <el-table-column>
              <template slot-="scope">
                <i class="el-icon-edit aaa"></i>
                <i class="el-icon-delete bbb"></i>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </div>
    </div>
    <!-- 添加弹框 -->
    <el-dialog
      title="添加待办事项"
      :visible.sync="dialogFormVisible"
      @close="editDialogClosed"
    >
      <el-form :model="formdalog" ref="fomrRef">
        <el-form-item label="请输入id" :label-width="formLabelWidth">
          <el-input v-model="formdalog.id" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="请输入内容" :label-width="formLabelWidth">
          <el-input v-model="formdalog.address" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addRess">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { ditu } from "../assets/js/ditu";
export default {
  name: "welcom",
  data() {
    return {
      dialogFormVisible: false,
      time: "",
      province: "",
      city: "",
      formdalog: {
        id: 6,
        address: "",
      },
      formLabelWidth: "120px",

      multipleSelection: [],
      tableData: [
        {
          id: 1,
          address: "今天修复几个bug",
        },
        {
          id: 2,
          address: "今天修复几个bug啊啊啊啊",
        },
        {
          id: 3,
          address: "今天修复几个bug修改几个bug",
        },
        {
          id: 4,
          address: "今天修复几个bug写几行代码",
        },
        {
          id: 5,
          address: "今天修复几个bug写几行代码删除",
        },
      ],
    };
  },
  created() {
    this.getLocation();
  },
  mounted() {
    //默认选中
    // for (let i = 0; i < this.tableData.length; i++) {
    //   if (this.tableData[i].id == "2") {
    //     this.$refs.multipleTable.toggleRowSelection(this.tableData[i]);
    //   }
    // }
    this.getTime(new Date());

    this.$refs.multipleTable.toggleRowSelection(this.tableData[3]);
    this.$refs.multipleTable.toggleRowSelection(this.tableData[4]);
  },
  methods: {
    handleSelectionChange(val) {
      //  打印的是选中的数据
      // console.log(this.multipleSelection);
      this.multipleSelection = val;
      //   for (item in this.multipleSelection) {
      //     // item[0].address.style = "text-decoration:line-through";
      //     console.log(item);
      //   }
      this.multipleSelection.forEach((element) => {
        // element.address.style = "text-decoration:line-through";
        // console.log(element);
      });
    },
    add() {
      this.dialogFormVisible = !this.dialogFormVisible;
    },
    //弹出框
    editDialogClosed() {
      this.$refs.fomrRef.resetFields();
    },
    addRess() {
      this.tableData.push(this.formdalog);
      this.dialogFormVisible = !this.dialogFormVisible;
    },
    //获取地址
    getLocation() {
      let _that = this;
      let geolocation = ditu.initMap("map-container"); //定位
      AMap.event.addListener(geolocation, "complete", (result) => {
        _that.lat = result.position.lat;
        _that.lng = result.position.lng;
        _that.province = result.addressComponent.province;
        _that.city = result.addressComponent.city;
        _that.district = result.addressComponent.district;
        console.log(result);
      });
    },
    //获取时间
    getTime(date) {
      var y = date.getFullYear();

      var m = date.getMonth() + 1;

      m = m < 10 ? "0" + m : m;

      var d = date.getDate();

      d = d < 10 ? "0" + d : d;

      // return y + '-' + m + '-' + d;
      this.time = y + "-" + m + "-" + d;
      console.log(y + "-" + m + "-" + d);
    },
  },
};
</script>

<style lang="less" scoped>
html body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
@color: #2d8bf0;
a {
  text-decoration: none;
}
.el-card {
  border-radius: 10px;
  .el-button {
    padding: 8px;
  }
}
/* 样式穿透1 */
.header-top /deep/ .el-card__body {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.box {
  display: flex;
  .box-zuo {
    // display: flex;
    margin-left: 30px;
    width: 400px;
    flex-shrink: 0;
    .box-top {
      margin-top: 30px;
      .box-top-top {
        display: flex;
        justify-items: center;
        align-items: center;
        margin-bottom: 10px;
        .box-top-img {
          width: 100px;
          height: 100px;
          img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
        }
        .box-top-right {
          font-size: 16px;
          // margin-top: 30px;
          margin-left: 10px;
        }
      }
    }

    .box-bottom {
      margin-top: 50px;
      padding: 8px;
      .bottom-top {
        margin-bottom: 10px;
        font-weight: 700;
      }
    }
  }
  .box-you {
    flex: 1;
    margin-right: 20px;
    .box-you-top {
      display: flex;
      .box-top-right1 {
        flex: 1;
        margin-left: 50px;
        margin-top: 30px;
        width: 0;
      }
      .box-top-right1 /deep/ .el-card__body {
        display: flex;
        justify-items: center;
        align-items: center;
        padding: 0;

        .right1-a {
          flex: 1;
          text-align: center;
          line-height: 100px;
          height: 100px;
          font-size: 26px;
        }
        .right1-b {
          // width: 50%;
          flex: 1;
          text-align: center;
        }
      }
    }
    .box-table {
      // margin: 30px, 50px, 0, 0;
      margin-left: 50px;
      margin-top: 60px;
      .table-top {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        span {
          font-weight: 700;
        }
        a {
          font-size: 12px;
          color: @color;
        }
      }
    }
  }
}

/* 样式穿透2 */
/* ::v-deep .el-card__body {
  display: flex;
  justify-content: space-between;
  /* align-items: center; */
/* }  */
// .box {
//   position: relative;
//   top: 40px;
//   left: 60px;
// }
// .header-left {
//   margin-left: 15px;
// }
// .header-right {
//   margin-right: 30px;
// }
// .box-top {
//   position: absolute;
//   width: 355px;
//   height: 260px;
// }
// .box-bottom {
//   position: absolute;
//   top: 280px;

//   width: 355px;
//   height: 260px;
// }
// .box-top-right1 {
//   position: absolute;

//   left: 400px;
//   width: 250px;
//   height: 100px;
// }
// .box-top-right2 {
//   position: absolute;

//   left: 680px;
//   width: 250px;
//   height: 100px;
// }
// .box-top-right3 {
//   position: absolute;

//   left: 960px;
//   width: 250px;
//   height: 100px;
// }
// .box-table {
//   position: absolute;
//   top: 120px;
//   left: 400px;
//   width: 800px;
//   height: 430px;
// }
// .box-top-top {
//   width: 250px;
//   height: 100px;
//   display: flex;
//   border-bottom: 1px solid #888a8d;
// }
// .box-top-top img {
//   width: 100px;
//   height: 80px;
//   border-radius: 50%;
// }
// .box-top-right {
//   margin-left: 10px;

//   margin-top: 20px;
// }
// .iid {
//   font-weight: 700;
//   font-size: 20px;
// }
// .user {
//   color: #888a8d;
// }
// .box-top-button {
//   color: #888a8d;
//   padding: 20px;
// }
// .button-button {
//   margin-top: 15px;
// }
// .bottom-top {
//   padding-bottom: 15px;
//   border-bottom: 1px solid #888a8d;
//   font-weight: 700;
// }
// .one {
//   margin-top: 15px;
// }
// .box-top-right1 >>> .el-card__body {
//   display: flex;
//   flex-direction: row;
//   padding: 0;
// }
// .box-top-right2 >>> .el-card__body {
//   display: flex;
//   flex-direction: row;
//   padding: 0;
// }
// .box-top-right3 >>> .el-card__body {
//   display: flex;
//   flex-direction: row;
//   padding: 0;
// }
// .right1-a {
//   flex: 1;
//   height: 100px;

//   font-size: 56px;
//   text-align: center;
//   color: #fff;
//   line-height: 100px;
// }
// .right1-b {
//   flex: 1;
//   text-align: center;
//   height: 100px;
//   /* line-height: 100px; */
//   margin-top: 25px;
// }
// a {
//   text-decoration: none;
//   color: #2d8bf0;
//   font-size: 14px;
// }
// .table-top {
//   display: flex;
//   justify-content: space-between;
//   border-bottom: 1px solid #888a8d;
//   padding-bottom: 10px;
// }
// .table-top span {
//   font-weight: 700;
// }
// .aaa {
//   font-size: 24px;
// }
// .bbb {
//   font-size: 24px;
//   margin-left: 15px;
// }
</style>